<template>
  <div class="PersonSimpleResume new-logo top-app">
    <!-- 头部 -->
    <!-- <nav-bar :title="'我的在线简历'"></nav-bar> -->
    <div class="circle_bg"></div>

    <!-- 内容区域 -->
    <el-form :model="dataList" :rules="rulesadd" ref="Refform">
      <div class="main cl">
        <div class="block w1200">
          <div class="left fl">
            <el-alert
              v-if="checkResult && '成功' != checkResult"
              :title="checkResult"
              type="error"
            >
            </el-alert>
            <div class="top">
              <label>请填写信息</label>
            </div>
            <div class="resume">
              <!-- 个人信息 -->
              <div class="section userinfo">
                <div class="title">基本信息<span class="bt">必填</span></div>
                <!-- <el-form-item label="照片" style="padding: 0 10px">
                  <div class="primary" v-if="show">
                    <div class="photo">
                      <el-avatar :src="photo"></el-avatar>
                      <el-upload
                        ref="upload"
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :on-change="handleAvatar"
                        :auto-upload="false"
                        accept="image/*"
                      >
                        <i class="el-icon-camera"></i>
                        <p>上传头像</p>
                      </el-upload>
                    </div>
                  </div>
                </el-form-item> -->

                <!-- 应聘岗位 -->
                <el-form-item prop="workNatureName" label="应聘岗位">
                  <el-input
                    v-model="dataList.workNatureName"
                    placeholder="请填写岗位"
                    v-if="show"
                  >
                  </el-input>
                </el-form-item>

                <!-- 姓名 -->
                <el-form-item prop="username" label="姓名">
                  <el-input
                    v-model="dataList.username"
                    placeholder="请填写姓名"
                    v-if="show"
                  >
                  </el-input>
                </el-form-item>

                <!-- 性别 -->
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="dataList.sex" v-if="show">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>

                <!-- 手机号码 -->
                <el-form-item label="手机号码" prop="phone">
                  <el-input
                    v-if="show"
                    type="number"
                    v-model="dataList.phone"
                    placeholder="请填写手机号码"
                  ></el-input>
                </el-form-item>

                <!-- 年龄 -->
                <el-form-item label="年龄" prop="age">
                  <el-input
                    type="number"
                    v-if="show"
                    v-model="dataList.age"
                    placeholder="请输入年龄"
                    maxlength="200"
                  ></el-input>
                </el-form-item>

                <!-- 现所住地 -->
                <el-form-item label="现所在地" prop="address">
                  <el-input
                    v-if="show"
                    v-model="dataList.address"
                    placeholder="请填写现所在地"
                    maxlength="200"
                  ></el-input>
                </el-form-item>
              </div>

              <!-- 教育经历 -->
              <div class="section education">
                <div class="title">教育经历</div>

                <!-- 最高学历 -->
                <el-form-item label="最高学历" prop="eduLevel">
                  <EduLevelPicker
                    v-if="show"
                    :targetLevel="dataList.eduLevel"
                    title="请选择学历"
                    @changeLevel="changeLevel"
                  ></EduLevelPicker>
                </el-form-item>

                <!-- 毕业院校 -->
                <el-form-item label="毕业院校">
                  <el-input
                    v-model="dataList.schoolName"
                    placeholder="请填写毕业院校"
                    v-if="show"
                  ></el-input>
                </el-form-item>

                <!-- 毕业时间 -->
                <el-form-item label="毕业时间">
                  <date-picker
                    v-if="show"
                    :targetDate="dataList.endEduTime"
                    @changeDate="
                      (selectDate) => changeDate(selectDate, 'endEduTime')
                    "
                  />
                </el-form-item>

                <!-- 所学专业 -->
                <el-form-item label="所学专业">
                  <el-input
                    v-model="dataList.major"
                    placeholder="请填写所学专业"
                    v-if="show"
                  ></el-input>
                </el-form-item>
              </div>

              <!-- 最近工作经历 -->
              <div class="section work">
                <div class="title">最近工作经历</div>
                <el-form-item label="公司名称">
                  <el-input
                    v-if="show"
                    v-model="dataList.companyName"
                    placeholder="请填写公司名称"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>

                <!-- 在职时间 -->
                <el-form-item>
                  <div class="resume-label">在职时间</div>
                  <el-col :span="11">
                    <el-form-item>
                      <date-picker
                        v-if="show"
                        :targetDate="dataList.workStartTime"
                        title="选择日期"
                        @changeDate="
                          (selectDate) =>
                            changeDate(selectDate, 'workStartTime')
                        "
                      />
                    </el-form-item>
                  </el-col>
                  <el-col class="line box88 resume-label" :span="2" v-if="show"
                    >至</el-col
                  >
                  <el-col :span="11">
                    <el-form-item>
                      <date-picker
                        v-if="show"
                        :targetDate="dataList.workEndTime"
                        title="选择日期"
                        @changeDate="
                          (selectDate) => changeDate(selectDate, 'workEndTime')
                        "
                      />
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <!-- 所在职位 -->
                <el-form-item label="所在职位">
                  <el-input
                    v-model="dataList.positionNameStr"
                    placeholder="请填写所在职位"
                    v-if="show"
                  ></el-input>
                </el-form-item>

                <!-- 所在职位 -->
                <el-form-item label="工作内容">
                  <el-input
                    v-if="show"
                    type="textarea"
                    placeholder="请填写工作内容"
                    v-model="dataList.workContent"
                    maxlength="1000"
                    show-word-limit
                    class="resume-placeholder"
                  />
                </el-form-item>
              </div>

              <!-- 最近项目经历 -->
              <div class="section project">
                <div class="title">最近项目经历</div>
                <!-- 项目描述 -->
                <el-form-item label="项目简介">
                  <el-input
                    v-if="show"
                    type="textarea"
                    placeholder="请填写项目描述"
                    v-model="dataList.projectDescribe"
                    maxlength="3000"
                    show-word-limit
                    class="resume-placeholder"
                  />
                </el-form-item>
              </div>

              <!-- 附件 -->
              <div class="section enclosure">
                <div class="title">
                  附件
                  <!--                  <div class="btnEdit" @click="edit('formEnclosure','add','')"><i
                                        class="el-icon-circle-plus-outline"></i>添加
                                    </div>-->
                </div>
                <div class="primary" v-if="!formEnclosureShow">
                  <ul>
                    <li v-for="(item, index) in fileList" :key="index">
                      <div class="txt">
                        <div class="t">
                          {{ item.fileRealName }}
                          <div
                            class="btnEdit"
                            @click="deleteInfo('formEnclosure', item.id)"
                          >
                            <i class="el-icon-delete"></i>删除
                          </div>
                          <div
                            class="btnEdit"
                            @click="
                              openFile(item.url, item.id, item.fileLastName)
                            "
                          >
                            <i class="el-icon-link"></i>查看
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="edit" v-if="formEnclosureShow">
                  <el-form
                    class="form cl"
                    label-width="25%"
                    :model="formEnclosure"
                    :rules="formEnclosureRules"
                    ref="formEnclosure"
                  >
                    <!--                    <el-form-item label="文件名称" prop="name">-->
                    <!--                      <el-input v-model.trim="formEnclosure.name" placeholder="请填写文件名称"></el-input>-->
                    <!--                    </el-form-item>-->
                    <el-upload
                      ref="uploadFile"
                      class="upload"
                      :class="uploadFlag ? '' : 'hide'"
                      action="#"
                      :on-change="handleFile"
                      :on-remove="handleFileRemove"
                      :limit="1"
                      :auto-upload="false"
                      accept="image/png,image/jpeg,application/pdf"
                      :file-list="formEnclosure.fileList"
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="tip" class="el-upload__tip">
                        支持PNG、JPG、PDF上传
                      </div>
                    </el-upload>
                    <!--                    <el-form-item style="margin-top: 30px;">-->
                    <!--                      <el-button type="primary" @click="uploadEnclosure('formEnclosure','add')">上传-->
                    <!--                      </el-button>-->
                    <!--&lt;!&ndash;                      <el-button @click="cancelEdit('formEnclosure')">取消</el-button>&ndash;&gt;-->
                    <!--                    </el-form-item>-->
                  </el-form>
                </div>
              </div>

              <el-form-item class="box55">
                <el-button type="primary" @click="submitForm(dataList)"
                  >投递简历</el-button
                >
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 底部 -->
    <!--        <Footer/>-->
    <!-- 头像裁剪 -->
    <el-dialog
      class="uploadPop"
      title="上传头像"
      width="400px"
      :visible.sync="UploadPhotoFlag"
      @close="UploadPhotoFlag = false"
      :close-on-click-modal="false"
    >
      <vueCropper
        ref="cropper"
        :img="cropperOption.img"
        :outputSize="cropperOption.size"
        :outputType="cropperOption.outputType"
        :info="true"
        :full="cropperOption.full"
        :canMove="cropperOption.canMove"
        :canMoveBox="cropperOption.canMoveBox"
        :original="cropperOption.original"
        :autoCrop="cropperOption.autoCrop"
        :autoCropWidth="cropperOption.autoCropWidth"
        :autoCropHeight="cropperOption.autoCropHeight"
        :fixed="cropperOption.fixed"
        :fixedNumber="cropperOption.fixedNumber"
        :centerBox="cropperOption.centerBox"
        :infoTrue="cropperOption.infoTrue"
        :fixedBox="cropperOption.fixedBox"
        :canScale="cropperOption.canScale"
        :enlarge="cropperOption.enlarge"
      ></vueCropper>
      <div class="btns">
        <el-button @click="UploadPhotoFlag = false">取消</el-button>
        <el-button type="primary" @click="cropperPhoto">确定</el-button>
      </div>
    </el-dialog>
    <!-- 查看附件图片 -->
    <el-dialog
      :visible.sync="dialogVisible"
      class="lookFile"
      :before-close="dialogClose"
    >
      <div class="box">
        <img :src="dialogImageUrl" alt="" v-if="dialogImageUrl" />
        <pdf
          :src="dialogPdfUrl"
          v-if="dialogPdfUrl"
          v-for="i in numPages"
          :key="i"
          :page="i"
        ></pdf>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  baseData,
  getResume,
  getTopResume,
  getSign,
  personInfo,
  topToken,
  resumeCheck,
  updatePhoto,
  updateResumeInfo,
  uploadTopFile,
  saveSimpleResume,
  cvFamilyMemberDelete,
  workIntentionDelete,
  workInfoDelete,
  eduInfoDelete,
  projectInfoDelete,
  trainInfoDelete,
  languageInfoDelete,
  skillInfoDelete,
  certificateInfoDelete,
  resumeFileDelete,
  resumeEdit,
} from "@/api/api";
import navBar from "@/components/navBar.vue";
import PersonUserInfo from "@/components/PersonUserInfo.vue";
import DatePicker from "@/components/datePicker.vue";
import EduLevelPicker from "@/components/eduLevelPicker.vue";
import { VueCropper } from "vue-cropper";
import pdf from "vue-pdf";
import common from "../top/common";

const validateEduLevel = (rule, value, callback) => {
  if (value === "-1") {
    callback(new Error("请选择最高学历！"));
  } else {
    callback();
  }
};

// 校验手机号
const validateMobile = (rule, value, callback) => {
  if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error("请输入正确的手机号"));
  } else {
    callback();
  }
};
export default {
  //组件注入
  components: {
    navBar,
    VueCropper,
    pdf,
    DatePicker,
    EduLevelPicker,
  },
  //存放数据
  data() {
    return {
      // 手写简历
      dataList: {
        username: "", //姓名
        phone: "", //手机号码
        sex: "", //性别
        age: "", //年龄
        address: "", //现居住地
        workNatureName: "", //应聘岗位名称
        photoId: "", //头像ID
        eduLevel: "-1", //最高学历
        schoolName: "", //毕业院校
        endEduTime: "", //毕业时间
        major: "", //所学专业
        companyName: "", //公司名称
        workStartTime: "", //在职开始时间
        workEndTime: "", //在职结束时间
        positionNameStr: "", //职位名称
        workContent: "", //工作内容
        projectDescribe: "", //项目描述
        enclosureId: "", //附件文件id
      },

      // 验证规则
      rulesadd: {
        workNatureName: [{ required: true, message: "请填写岗位" }],
        address: [{ required: true, message: "请填写现居住地" }],
        age: [{ required: true, message: "请填写年龄" }],
        sex: [{ required: true, message: "请填写性别" }],
        phone: [{ required: true, validator: validateMobile }],
        eduLevel: [
          {
            required: true,
            message: "请选择最高学历",
            validator: validateEduLevel,
          },
        ],
        username: [{ required: true, message: "请填写姓名" }],
      },

      // 显示与隐藏
      show: true,

      ///////////////////////////////////////////////////////

      checkResult: "", //简历情况
      random: 0, //随机值（更新用户信息用）
      editType: "", //add 添加
      editId: "", //编辑id
      editIdStorage: {}, //修复 工作实习经历或教育经历 与其他项同时编辑时  报错  编辑失败
      resumeId: "", //简历id
      resumeType: 1, //1：社招，2：校招
      formUserInfoShow: false, //个人信息编辑
      formAdvantageShow: false, //个人优势编辑
      majorResearchDirectionShow: false, //主要研究方向编辑
      majorWorkPerformanceShow: false, //主要工作业绩
      selfEvaluationShow: false, //自我综合评价
      otherSituationsShow: false, //其他情况
      formWantJobShow: false, //期望职位编辑
      formWorkShow: false, //工作经历编辑
      formEducationShow: false, //教育经历编辑
      formProjectShow: false, //项目经历编辑
      formTrainShow: false, //培训经历编辑
      formLanguageShow: false, //语言能力编辑
      formSkillShow: false, //技能编辑
      formCertificateShow: false, //证书编辑
      formFamilyShow: false, //家庭成员
      formEnclosureShow: true, //附件上传
      UploadPhotoFlag: false, //上传头像
      fileName: "",
      cropperOption: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 300, // 默认生成截图框宽度
        autoCropHeight: 300, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        enlarge: 1,
      },
      photo: "", //头像
      familyList: [],
      formFamily: {
        id: "",
        appellation: "", // 称谓
        name: "", // 姓名
        age: null, // 年龄
        company: "", // 单位
        position: "", // 职位
        politics: "", // 政治面貌
        remark: "", // 备注
        birthday: "", //出生年月
        education: "", //文化程度
        phone: "", //联系短电话
      },
      formFamilyRules: {
        appellation: [{ required: true, message: "请填写称谓" }],

        name: [{ required: true, message: "请填写亲属姓名" }],
        birthday: [{ required: true, message: "请填写出生年月" }],
        age: [{ required: true, message: "请填写年龄" }],
        politics: [{ required: true, message: "请填写政治面貌" }],
        education: [{ required: true, message: "请填写文化程度" }],
        position: [{ required: true, message: "请填写职位" }],
        company: [{ required: true, message: "请填写单位" }],
        phone: [{ required: true, message: "请填写联系电话" }],
      },
      formUserInfo: {
        tripartiteAgreement: "", //临时放置，为了验证
        name: "游客", //姓名
        sex: "", //性别
        birthday: "", //出生年月
        identity: "", //求职身份
        workState: "", //求职状态
        maritalStatus: "", //婚姻状况
        jobTime: "", //参加工作时间
        worked: false,
        homeTownCode: "", //户口所在地
        liveCityCode: "", //现居住城市
        political: "", //政治面貌
        phone: "", //联系方式
        email: "", //电子邮箱
        age: null, //年龄
        workYear: "0", //工作时间
        jobTimeFlag: true, //暂无工作经验
        photoId: "", //头像文件id
        r1: "1", // 同意调剂 标识 1 同意  2 不同意
        r2: "", // 民族
        r3: "", // 身高
        r4: "", // 体重
        r5: "", // 驾驶证
        r6: "", // 身份证号
        r7: "", // 紧急联系人
        r8: "", // 紧急联系方式
        partyTime: "", //入党时间
        foreignLanguage: "无", //外语水平
        computerSkill: "无", //计算机水平
        address: "", //现所在地
      },

      formWork: {
        id: "",
        companyName: "", //公司名称
        positionNameCode: [], //所任职位
        workSignCode: [], //该份工作需要的技能
        workTime: "", //在职时间
        salary: "", //税前月薪
        workContent: "", //工作内容
        r1: "", // 单位类型
        r2: "", // 所属部门
        r3: "", // 直接上级
        r4: "", // 上级职位
        r5: "", // 下属人数
        r6: "", // 离职原因
      },
      formEducation: {
        id: "",
        schoolName: "", //学校名称
        major: "", //所学专业
        overseasFlag: "", //海外学习经历
        studyTime: "", //就读时间
        recruitmentFlag: "", //是否统招
        eduLevel: "", //学历
        r1: "", // 学位 1 学士 2 硕士 3 博士
        r2: "1", // 是否全日制 1 是 2 不是
      },
      formProject: {
        id: "",
        projectName: "", //项目名称
        time: "", //项目时间
        projectDescribe: "", //项目描述
      },
      formTrain: {
        id: "",
        time: "", //培训时间
        mechanismName: "", //培训机构
        curriculum: "", //培训课程
      },

      formEnclosure: {
        //附件
        name: "", //证书名称
        file: {}, //文件
        fileList: [],
      },
      uploadFlag: true,
      formEnclosureRules: {
        //附件验证
        name: [{ required: false, message: "请填写附件名称" }],
        file: [{ required: true, message: "请上传附件" }],
      },
      fileList: [], //附件列表

      dialogVisible: false, //附件图片弹出
      dialogImageUrl: "", //附件图片
      dialogPdfUrl: "", //pdf
      numPages: undefined, //pdf
    };
  },
  //方法集合
  methods: {
    changeDate(selectDate, field) {
      this.dataList[field] = selectDate;
    },
    changeLevel(selectLevel) {
      this.dataList.eduLevel = selectLevel;
    },
    // 保存
    submitForm() {
      const { token, id } = this.$route.query;
      if (!token) {
        this.$toast(common.noLoginTxt);
        return;
      }
      if (this.show === true) {
        this.$refs.Refform.validate((valid) => {
          if (valid) {
            if (this.formEnclosure.file.name) {
              this.uploadEnclosure("formEnclosure", "add");
            } else {
              saveSimpleResume(
                Object.assign({ jobId: id, channel: "ddxw" }, this.dataList)
              ).then((res) => {
                if (res.code === 200) {
                  this.$message.success("投递成功");
                  this.$store.dispatch("loginTop", { token });
                  this.$router.push({
                    path: "/top/list",
                    query: {
                      token,
                    },
                  });
                } else {
                  this.$message.error(res.message);
                }
              });
            }
          } else {
            return false;
          }
        });
      }
    },
    //取消编辑简历
    cancelEdit(formName) {
      if (formName == "formEnclosure") {
        this[formName + "Show"] = true;
        // this.getResume()
      }
    },
    //删除
    deleteInfo(formName, id) {
      this.$confirm("删除后不可恢复，确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //家庭成员删除
        if (formName == "formFamily") {
          cvFamilyMemberDelete({
            id: id,
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //期望职位删除
        if (formName == "formWantJob") {
          workIntentionDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //工作经历删除
        if (formName == "formWork") {
          workInfoDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //教育经历删除
        if (formName == "formEducation") {
          eduInfoDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //项目经历删除
        if (formName == "formProject") {
          projectInfoDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //培训经历删除
        if (formName == "formTrain") {
          trainInfoDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //语言能力删除
        if (formName == "formLanguage") {
          languageInfoDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //特长技能删除
        if (formName == "formSkill") {
          skillInfoDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //特长技能删除
        if (formName == "formCertificate") {
          certificateInfoDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //特长技能删除
        if (formName == "formCertificate") {
          certificateInfoDelete({
            id: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getResume();
              this.updateResumeInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        }
        //附件删除
        if (formName == "formEnclosure") {
          resumeFileDelete({
            id: this.resumeId,
            enclosureId: id,
          }).then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.$message.success("删除成功");
              // this.getResume()
              // this.updateResumeInfo()
              this.handleFileRemove();
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },

    // 上传附件
    uploadEnclosure(formName, type) {
      const { token, id } = this.$route.query;
      if (!token) {
        this.$toast(common.noLoginTxt);
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //上传附件
          if (formName === "formEnclosure") {
            if (!this.formEnclosure.file.name) {
              //this.$message.error('请上传文件');
              return false;
            }
            if (
              this.formEnclosure.name === null ||
              this.formEnclosure.name === ""
            ) {
              this.formEnclosure.name = this.formEnclosure.file.name.substring(
                0,
                this.formEnclosure.file.name.lastIndexOf(".")
              );
            }
            let type = this.formEnclosure.file.name.substring(
              this.formEnclosure.file.name.lastIndexOf(".") + 1
            );
            let date =
              new Date().getFullYear() + "/" + (new Date().getMonth() + 1);
            let formData = new FormData();
            formData.append(
              "file",
              this.formEnclosure.file,
              this.formEnclosure.name + "." + type
            ); //
            formData.append("biz", "public/user/" + date);
            uploadTopFile(formData).then((res) => {
              if (res.code === 200) {
                this.dataList.enclosureId = res.result.fileId;
                //this.$message.success('上传成功');
                this.cancelEdit("formEnclosure");
                this.formEnclosureShow = false;
                this.fileList[0] = res.result;
                this.fileList[0].id = res.result.fileId;
                this.fileList[0].fileRealName = res.result.name;
                this.fileList[0].fileLastName = type;
                saveSimpleResume(
                  Object.assign({ jobId: id, channel: "ddxw" }, this.dataList)
                ).then((res) => {
                  if (res.code === 200) {
                    this.$message.success("投递成功");
                    this.$store.dispatch("loginTop", { token });
                    this.$router.push({
                      path: "/top/list",
                      query: {
                        token,
                      },
                    });
                  } else {
                    this.$message.error(res.message);
                  }
                });
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //上传头像
    handleAvatar(file) {
      let isLt5M = file.size / 1024 / 1024 < 5;
      let type = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 5MB!");
        return false;
      }
      if (!(type === "png" || type === "jpg" || type === "jpeg")) {
        this.$message.error("请上传PNG、JPG格式的文件");
        return false;
      }
      this.fileName = file.name;
      file.url = URL.createObjectURL(file.raw);
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        this.cropperOption.img = file.url;
        this.UploadPhotoFlag = true;
      });
    },
    //头像裁剪完回调
    cropperPhoto() {
      this.$refs.cropper.getCropBlob((data) => {
        let date = new Date().getFullYear() + "/" + (new Date().getMonth() + 1);
        let formData = new FormData();
        formData.append("file", data, this.fileName);
        formData.append("biz", "public/user/" + date);
        uploadTopFile(formData).then((res) => {
          if (res.code === 200) {
            updatePhoto({ id: this.id, photoId: res.result.fileId }).then(
              (response) => {
                if (response.success) {
                  this.photo = res.result.url;
                  this.formUserInfo.photoId = res.result.fileId;
                  this.UploadPhotoFlag = false;
                  this.updateUserInfo(); //更新用户信息
                  //this.updateResumeInfo() //根据简历id更新在线简历详情
                } else {
                  this.$message.error(res.message);
                }
              }
            );
            // this.submitForm('formUserInfo')
          } else {
            this.$message.error(res.message);
          }
          console.log(this.formUserInfo);
        });
      });
    },
    //上传附件
    handleFile(file, fileList) {
      console.log(fileList);
      this.dataList.enclosureId = fileList[0].uid;
      let isLt5M = file.size / 1024 / 1024 < 5;
      let type = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 5MB!");
        this.$refs.uploadFile.clearFiles();
        return false;
      }
      if (
        !(type === "png" || type === "jpg" || type === "jpeg" || type === "pdf")
      ) {
        this.$message.error("请上传PNG、JPG、PDF格式的文件");
        this.$refs.uploadFile.clearFiles();
        return false;
      }
      if (fileList.length > 0) {
        this.uploadFlag = false;
      }
      this.formEnclosure.file = file.raw;
    },
    //移除上传附件回调
    handleFileRemove() {
      this.formEnclosure.file = {};
      this.uploadFlag = true;
    },
    getNum(i) {
      return i < 10 ? "0" + i : i;
    },
    getFormatDate(timeStamp) {
      const date = new Date(timeStamp); // 获取时间
      const year = date.getFullYear(); // 获取年
      const month = date.getMonth() + 1; // 获取月
      const strDate = date.getDate(); // 获取日
      return `${year}-${this.getNum(month)}-${this.getNum(strDate)}`;
    },
    getResume() {
      this.random = Math.random();
      if (!this.resumeId) {
        return;
      }
      getTopResume({
        resumeId: this.resumeId,
      }).then((res) => {
        if (res.code !== 200) {
          return;
        }
        const {
          newUserInfo: { age, address, username, phone, sex },
          newEduInfo: { eduLevel, schoolName, endEduTime, major },
          newWorkInfo: {
            companyName,
            workStartTime,
            workEndTime,
            positionNameStr,
            workContent,
          },
          newProjectInfo: { projectDescribe },
          newResume: { enclosureId },
        } = res.result;
        this.dataList.username = username;
        this.dataList.phone = phone;
        this.dataList.sex = sex;
        this.dataList.age = age;
        this.dataList.address = address;
        this.dataList.eduLevel = eduLevel.toString();
        this.dataList.schoolName = schoolName;
        this.dataList.endEduTime = this.getFormatDate(endEduTime);
        this.dataList.major = major;
        this.dataList.companyName = companyName;
        this.dataList.workStartTime = this.getFormatDate(workStartTime);
        this.dataList.workEndTime = workEndTime;
        this.dataList.positionNameStr = positionNameStr;
        this.dataList.workContent = workContent;
        this.dataList.projectDescribe = projectDescribe;
        this.dataList.enclosureId = enclosureId;
      }); //end of getResume
    },
    //更新用户信息
    updateUserInfo() {
      //获取用户信息
      personInfo({
        id: this.userId,
      }).then((res) => {
        console.log(res.result);
        if (res.code === 200) {
          localStorage.setItem("userInfo", JSON.stringify(res.result));
        }
      });
    },
    //根据简历id更新在线简历详情
    updateResumeInfo() {
      updateResumeInfo({
        resumeId: this.resumeId,
      }).then((res) => {
        console.log(res);
      });
    },
    //查看附件
    openFile(file, fileId, fileLastName) {
      let sign = "";
      //获取签名
      getSign({
        fileId: fileId,
      }).then((res) => {
        if (res.code === 200) {
          sign = res.result;
          if (fileLastName == "png" || fileLastName == "jpg") {
            this.handlePictureCardPreview(file + "?sign=" + sign);
          }
          if (fileLastName == "pdf") {
            this.handlePictureCardPreview();
            this.dialogPdfUrl = pdf.createLoadingTask(file + "?sign=" + sign);
            this.dialogPdfUrl.promise
              .then((pdf) => {
                this.numPages = pdf.numPages;
              })
              .catch((err) => {
                this.$message.error("简历预览失败");
                console.log(err);
              });
          }
        }
      });
    },
    //查看附件图片
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    //清空弹出内容
    dialogClose() {
      this.dialogVisible = false;
      setTimeout(() => {
        this.dialogImageUrl = "";
        this.dialogPdfUrl = "";
      }, 500);
    },
    updateTopUserInfo() {
      const token = this.$route.query.token;
      if (!token) {
        this.$toast(common.noLoginTxt);
        return;
      }
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.resumeId = userInfo.resumeId;
      if (userInfo) {
        this.userName = userInfo.username;
        this.userId = userInfo.id;
        this.id = userInfo.id;
        this.dataList.username = userInfo.username;
        this.dataList.phone = userInfo.phone;
        this.dataList.sex = userInfo.sex ? 1 : 2;
        this.dataList.age = userInfo.age;
        this.dataList.address = userInfo.address;
        this.dataList.workNatureName = this.$route.query.jobName || "";
        this.dataList.photoId = userInfo.photoId;
        this.dataList.eduLevel = userInfo.eduLevel || "-1";
        //调简历信息
        this.getResume();
      }
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //判断登录状态
    this.updateTopUserInfo();
  },
};
</script>

<style lang="scss">
@import "../../styles/mixin.scss";
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin text-ellipsisclamp($clamp) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
  overflow: hidden;
}

@mixin transition {
  transition: all 0.3s;
}

.bt {
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  font-size: 20px;
  color: #fff;
  font-weight: normal;
  border-radius: 10px 0px 10px 0px;
  background: #e54437;
  display: inline-block;
  text-align: center;
  vertical-align: 2px;
  margin-left: 5px;
}

.PersonSimpleResume {
  //background: #f6f6f6;
  position: relative;
  width: 100%;
  overflow: hidden;

  .el-input__inner {
    height: 60px;
  }

  .el-range-input {
    font-size: 22px;
  }

  .el-date-editor .el-range-separator {
    font-size: 22px;
  }

  .el-form-item__error {
    font-size: 18px;
  }

  .el-button {
    font-size: 22px;
  }

  .main {
    position: relative;
    z-index: 0;
    min-height: 500px;

    .banner {
      width: 100%;
      height: 120px;
      background: url("../../assets/person-bg.jpg") center no-repeat;
      background-size: cover;
    }

    .block {
      height: auto;
      overflow: hidden;
      margin-top: 30px;
      padding-bottom: 60px;

      .left {
        width: 100%;
        height: auto;
        overflow: hidden;

        .top {
          height: auto;
          overflow: hidden;
          background: #eee;
          padding: 15px 30px;

          label {
            font-size: 28px;
            color: #666;
            font-weight: bold;
            line-height: 40px;
            display: inline-block;
            vertical-align: -1px;
          }

          .el-select {
            width: 180px;

            .el-input__inner {
              font-size: 28px;
              border: 0 !important;
              background: none !important;
              color: #e54437;
              font-weight: bold;
            }

            .el-option {
              font-size: 28px;
            }
          }
        }

        .resume {
          height: auto;
          overflow: hidden;
          padding: 30px;
          background: #fff;

          .section {
            height: auto;
            overflow: hidden;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f2f2f2;

            .title {
              font-size: 30px;
              color: #333;
              font-weight: bold;
              position: relative;
              padding-left: 15px;
              margin-bottom: 10px;

              &:after {
                content: "";
                width: 3px;
                height: 15px;
                background: #e54437;
                position: absolute;
                left: 0;
                top: 13px;
              }

              .btnEdit {
                opacity: 1;
              }
            }

            .btnEdit {
              opacity: 0;
              float: right;
              font-size: 24px;
              /*font-weight: normal;*/
              font-weight: bold;
              color: #999;
              @include transition();
              cursor: pointer;

              margin: 0 10px 0 20px;

              i {
                margin-right: 4px;
              }

              &:hover {
                color: #e54437;
              }
            }

            .form {
              height: auto;
              padding: 30px;

              .el-radio {
                min-width: 100px;
                text-align: center;
                margin: 0 15px 0 0;
                border-radius: 0;
                background: #fff;

                &:last-child {
                  margin: 0;
                }
              }

              .label {
                width: 25%;
              }

              .el-row {
                margin-bottom: 22px;
              }

              .el-input,
              .el-select,
              .el-cascader {
                width: 100%;
              }

              .el-input__inner {
                border-radius: 0;
              }

              .el-icon-date,
              .el-input__icon {
                vertical-align: -2px;
              }

              .el-textarea__inner {
                height: 100px;
                border-radius: 0;
                padding: 10px 15px;
              }

              .el-textarea .el-input__count {
                line-height: normal;
              }

              .el-form-item:last-child {
                margin: 0;
              }

              .left,
              .right {
                width: 48%;
                height: auto;
                overflow: visible;
              }

              .el-upload {
                width: 140px;
                height: 140px;
                line-height: 140px;
                border: 1px dashed #dcdfe6;
                border-radius: 5px;
                cursor: pointer;

                i {
                  font-size: 24px;
                  color: #999;
                }
              }

              .hide {
                .el-upload,
                .el-upload__tip {
                  display: none;
                }
              }
            }

            .el-form_edit {
            }

            .primary {
              height: auto;
              overflow: hidden;
              position: relative;

              ul {
                height: auto;
                overflow: hidden;

                li {
                  height: auto;
                  overflow: hidden;
                  margin-bottom: 10px;

                  .t {
                    font-size: 24px;
                    color: #333;

                    span {
                      font-size: 20px;
                      color: #999;
                      margin-left: 10px;
                    }

                    .btnEdit {
                      margin-right: 0;
                    }
                  }

                  .dsc {
                    font-size: 18px;
                    color: #888;
                    line-height: 30px;
                    margin-top: 8px;

                    span {
                      margin-right: 15px;
                      position: relative;
                      padding-right: 15px;

                      &:after {
                        content: "";
                        width: 1px;
                        height: 12px;
                        background: #eee;
                        position: absolute;
                        right: 0;
                        top: 2px;
                      }

                      &:last-child {
                        margin: 0;
                        padding: 0;

                        &:after {
                          display: none;
                        }
                      }
                    }

                    .tt {
                      color: #666;
                    }

                    p {
                      line-height: 22px;
                      white-space: pre-wrap;
                    }
                  }

                  dl {
                    height: auto;
                    overflow: hidden;
                    margin-top: 8px;

                    dd {
                      width: 80%;
                      font-size: 24px;
                      color: #666;
                      float: left;
                      line-height: 30px;
                      padding: 5px;

                      span {
                        line-height: 24px;
                        padding: 0 10px;
                        background: #eee;
                        display: inline-block;
                        margin-right: 10px;
                      }
                    }
                  }

                  &:last-child {
                    margin: 0;
                  }
                }
              }

              .txt {
                white-space: pre-wrap;
                word-wrap: break-word;
                font-size: 24px;
                color: #666;
                cursor: pointer;
                padding: 10px;
                @include transition();

                &:hover {
                  background: #f9f9f9;

                  .btnEdit {
                    opacity: 1;
                  }
                }
              }
            }

            .edit {
              height: auto;
              overflow: hidden;
              position: relative;
              background: #f6f6f6;
              margin-top: 20px;
              font-size: 24px;
            }

            .edit_margin_top {
              margin-top: 40px;
            }

            .edit .el-form .el-row .el-col .el-form-item .el-form-item__label {
              font-size: 24px;
            }

            .el-form-item__content .el-input__inner {
              font-size: 24px;
            }

            .el-form-item__content .el-radio__label {
              font-size: 24px;
            }

            .el-cascader-node__label {
              font-size: 24px;
            }

            .el-form-item__label {
              font-size: 24px;
            }

            &:last-child {
              margin: 0;
              padding: 0;
              border: 0;
            }
          }

          .userinfo {
            .photo {
              //width: 80px;
              //height: 80px;
              border-radius: 50%;
              overflow: hidden;
              float: left;
              margin-right: 20px;
              cursor: pointer;
              position: relative;

              img {
                width: 100%;
                height: 100%;
              }

              .avatar-uploader {
                width: 100%;
                height: 100%;
                background: rgba($color: #000000, $alpha: 0.5);
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                @include transition();

                i {
                  font-size: 24px;
                  color: #fff;
                }

                p {
                  font-size: 20px;
                  color: #fff;
                }

                &:focus {
                  color: #fff;
                }

                .el-upload {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-flow: column;
                  align-items: center;
                  justify-content: center;
                }
              }

              &:hover .avatar-uploader {
                opacity: 1;
              }
            }

            .btnEdit {
              opacity: 1;
            }

            .text {
              height: auto;
              overflow: hidden;

              .name {
                font-size: 28px;
                color: #333;
                font-weight: bold;

                span {
                  font-size: 22px;
                  color: #999;
                  font-weight: normal;
                  margin-left: 10px;
                }
              }

              .other {
                height: auto;
                overflow: hidden;
                margin-top: 0px;

                span {
                  font-size: 24px;
                  color: #666666;
                  position: relative;
                  padding-right: 15px;
                  margin-left: 15px;

                  &:after {
                    content: "";
                    width: 1px;
                    height: 12px;
                    background: #e8e8e8;
                    position: absolute;
                    right: 0;
                    top: 3px;
                  }

                  &:first-child {
                    margin: 0;
                  }

                  &:last-child:after {
                    display: none;
                  }
                }
              }

              .contact {
                height: auto;
                overflow: hidden;
                margin-top: 0px;

                span {
                  font-size: 24px;
                  color: #333;
                  margin-right: 30px;

                  i {
                    font-size: 16px;
                    vertical-align: -1px;
                    color: #999;

                    &.icon-email {
                      font-size: 17px;
                      margin-right: 3px;
                    }
                  }
                }
              }
            }

            .btnEdit {
              position: absolute;
              right: 0;
              top: 0;
            }

            .look {
              font-size: 24px;
              font-weight: bold;
              color: #999;
              cursor: pointer;
              position: absolute;
              right: 0;
              top: 50px;
              margin: 0 10px 0 20px;
              @include transition();

              i {
                margin-right: 4px;
              }

              &:hover {
                color: #e54437;
              }
            }
          }

          .wantJob,
          .work,
          .education {
            .el-input {
              width: 100% !important;
            }

            .el-radio {
              min-width: 100px !important;
            }
          }

          .project {
            .el-textarea__inner {
              height: 150px !important;
            }
          }
        }
      }

      .right {
        width: 270px;
        height: auto;
        overflow: hidden;
      }
    }
  }

  .uploadPop {
    .vue-cropper {
      height: 300px;

      img {
        transition: none;
      }
    }

    .btns {
      text-align: center;
      margin-top: 25px;

      .el-button {
        width: 100px;
        margin: 0 10px;
      }
    }
  }

  .lookFile {
    .box {
      height: auto;
      max-height: 500px;
      overflow-y: auto;

      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}

.el-radio.is-bordered {
  height: 58px;
}
</style>

<style scoped>
.box88 {
  padding: 10px 0 0 18px;
}

.box77 {
  position: absolute;
  right: 30px;
  font-size: 28px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
  margin: 0 10px 0 20px;
}

.box22 {
  width: 140px;
  height: 140px;
  line-height: 140px;
  border: 1px dashed #dcdfe6;
  border-radius: 5px;
  cursor: pointer;
}

.box66 {
  margin-top: 0;
  padding-top: 0;
  /* line-height: 0px; */
  /* background-color: black; */
}

.box55 {
  margin-top: 30px;
  text-align: center;
}

.resume-label {
  font-size: 0.32rem;
  color: #606266;
}
.resume-placeholder {
  font-size: 0.32rem;
}
</style>
